<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Cropper</title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/cropper.css">
		<link rel="stylesheet" href="css/main.css">

		<style>

			#container {
				width: 100%;
				position: absolute;
				top: 44px;
				bottom: 0px;
				background: #000000;
			}
			
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<button type="button" id="cutter" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right" style="color: white;">使用</button>
			<span class="mui-title title-color" id="chatting-nickname" style="text-align: left; margin-top: 3px;">头像</span>
		</header>

		<!-- Content -->
		<div id="container">
			<div class="img-container">
				<img id="image" src="../../image/loading.jpg" style="background-color: #000000;">
			</div>
		</div>

		<!-- Scripts -->
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
		<script src="https://fengyuanchen.github.io/js/common.js"></script>
		<script src="js/cropper.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/api/chatapi.js"></script>

		<script type="text/javascript">
			mui.init();

			let $image = $('#image');
			mui.plusReady(function() {

				let user = app.getCacheUser();
				let headPortraitUrl = user.headPortrait;
				// 获取屏幕宽度，设置图片
				$image.attr('src', headPortraitUrl);

				/** ======================== 从相册选择图片 ======================== **/
				// 从相册中选择图片
				plus.gallery.pick(function(path) {
					$image.attr('src', path);
					faceCutter();
				}, function(e) {
					mui.openWindow("index.html", "index.html");
				}, {
					filter: "image"
				});

				/** ======================== 图片裁剪 ======================== **/

				$("#cutter").on('tap', function() {

					plus.nativeUI.showWaiting("上传中...");
					
					let cropper = $image.data('cropper');
					cropper.getCroppedCanvas().toBlob((blob) => {
						console.log(blob)
						console.log(blob.size)
						console.log(blob.type)
						let form = new FormData()
						form.append('file', blob);
						chatapi.upload(form, (user) => {
							console.log(app.formatDate(new Date()) + ': [info]' + ' ======> [上传头像成功]: ' + JSON.stringify(user));
							plus.nativeUI.closeWaiting();
							// 缓存用户信息
							app.setCacheUser(user)
			
							// 触发另外一个webview的自定义事件，可以使用 mui.fire()
							let meWebview = plus.webview.getWebviewById("me.html");
							mui.fire(meWebview, "refresh");
			
							// 触发另外一个webview的自定义事件，可以使用 mui.fire()
							let headPortraitWebview = plus.webview.getWebviewById("head-portrait.html");
							mui.fire(headPortraitWebview, "refresh");
			
							// 页面跳转
							mui.openWindow("head-portrait.html", "head-portrait.html");
						})
					}, 'image/jpeg');
				});
			});

			function faceCutter() {
				plus.nativeUI.showWaiting("请稍等...");
				//				let $image = $('#image');
				let options = {
					aspectRatio: 1 / 1,
					crop: function(e) {}
				};
				// Cropper
				$image.cropper(options);
				plus.nativeUI.closeWaiting();
			}
		</script>

	</body>

</html>
